PR: `Phoenix` `LiveView` Drag-and-Drop Example #5

SimonLab · 2022-10-19T20:58:21Z

Create Phoenix application
see: #4

Run the current examples with node Add lock package file to gitignore

- Create new phx app - Add Tailwind to the phoenix application

SimonLab · 2022-10-21T10:28:51Z

I've added Tailwind to the Phoenix application with c4f9743

However the hot reload when changing a css class doesn't seem to work. I have to stop and restart the server to be able to see the Tailwind changes. @nelsonic when you have some time, do you mind to try this branch to see if changing a css Tailwind class automatically apply the new style on your browser. I'm not sure if it's a configuration issue on my machine or on the Phx application itself.

nelsonic · 2022-10-21T10:37:24Z

@SimonLab remember to add the "watcher". Find the watchers section in config/dev.exs and add:

tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]}

See: https://github.com/dwyl/learn-tailwind/blob/61886d3a9821873c02c2bae7cc3a42692b90ef58/config/dev.exs#L17-L21

SimonLab · 2022-10-21T11:09:41Z

Yes I've added the watcher here:

learn-alpine.js/config/dev.exs

Lines 27 to 31 in c4f9743

    
           watchers: [ 
        
             # Start the esbuild watcher by calling Esbuild.install_and_run(:default, args) 
        
             esbuild: {Esbuild, :install_and_run, [:default, ~w(--sourcemap=inline --watch)]}, 
        
             tailwind: {Tailwind, :install_and_run, [:default, ~w(--watch)]} 
        
           ]

That's why I'm not sure what the css is not compiled automatically when I changed a class

nelsonic · 2022-10-21T11:16:35Z

Hmm ... that's strange. Let me try and run it on my localhost. 👨‍💻
If you want to get on Zoom to remote-pair/debug this LMK (via Signal). 👌

nelsonic · 2022-10-21T14:09:11Z

@SimonLab I did:

git checkout 'phoenix-example-#4'
mix deps.get
mix assets.deploy
mix s

Works for me:

tailwind-hot-reloading-working.mov

…es see: #5 (comment)

SimonLab · 2022-10-22T12:31:09Z

Thanks for checking, I didn't run mix assets.deploy as I thought it was used only on production.
I'll try again now

SimonLab · 2022-10-22T12:48:50Z

Weirdly hotreload works with Tailwind v3.18, however v3.2.0 or v3.2.1 doesn't change the UI on reload!
@nelsonic did you run mix tailwind.install to make sure you tested with v3.2.0?

I don't want to spend too much time on this specific issue, if it's working with 3.1.8 I'll continue with this and see later on if I can find what is the problem with v3.2

- hotreload doesn't seem to work with 3.2 so using 3.1.8

Add alpine.js cdn in root file Create button using Alpine to test everything still ok

Create item schema using phx.gen.live

nelsonic · 2022-10-22T20:33:48Z

@SimonLab yeah, it worked with Tailwind v3.2.0 but totally fine to downgrade if it allows you to make progress. 👌

Run mix format

Create index when new item created

Update modal form to create item

Update and remove unused tests

nelsonic · 2022-10-24T08:57:13Z

@SimonLab looking great so far. Thanks for the demo during standup. 👌

First attempt at drag and drop with vanilla js version

Drag and drop with javascript

SimonLab · 2022-10-24T15:16:35Z

It took me a bit of time to implement a solution using javascript: eeba5be

My goal is now to see how to implement the vanilla js logic using Alpine.js.
However I've noticed a few things I need to fix:

The new item created are not displayed on connected clients, I need to make sure the liveview event is dispatch to all browsers
Adding a new item break the js logic. I think it's because the dom as changed with liveview and js is not able to automatically see the new changes. I'll need to see how to work with LiveView and JS. Maybe "Dom patching" could be a solution: https://hexdocs.pm/phoenix_live_view/dom-patching.html

use bg-red-100 to see moving item

Set background color when an element is moved

Use Alpine.js to drag and drop an item in a list

Remove Tailwind and Petal Components to make the setup easier.

Read again the doc and make it easier to follow/implement

SimonLab · 2022-11-01T20:59:51Z

@LuchoTurtle I've updated the documentation (you won't need to install Petal) and this should be easier to setup and follow but let me know if you still spot some issues, thanks

nelsonic · 2022-11-02T08:39:06Z

git checkout 'phoenix-example-#4'
git pull
mix deps.get
mix ecto.reset
mix s

Still need to finish looking at the code in more detail. But so far so good. 👌

SimonLab · 2022-11-02T08:50:00Z

I forgot to update the code to the latest version described in the doc. I'm going to do this soon! Thank for testing the PR!

LuchoTurtle · 2022-11-02T10:04:26Z

Finished going through the guide and got it working splendidly! Thank you @SimonLab !

I'll leave the code review to the pros 😅

Update Phoenix app code to match the one describe in the markdown documentation

nelsonic · 2022-11-02T21:19:50Z

lib/app_web/live/item_live/index.html.heex

+<h1>Listing Items</h1>
+
+<%= if @live_action in [:new, :edit] do %>
+  <.modal return_to={Routes.item_index_path(@socket, :index)}>


@SimonLab do we need to use a <.modal> for creating new items? 🤷‍♂️

The modal is created automatically by Phoenix when running the phx.gen.live command at https://github.com/dwyl/learn-alpine.js/blob/phoenix-example-%234/drag-and-drop.md#create-items

I thought about updating the way Phoenix creates the items however I didn't want to make the tutorial longer and preferred to focus on the drag and drop feature part itself.

Otherwise I can create another documentation file to explain how to create from scratch (without using the phx gen.live command) the liveView structure for creating the items.

@SimonLab thanks for clarifying that this was generated by phx.gen.live. 👌
It's definitely concerning [to me] that someone in the Phoenix team 🤷‍♂️
thought it was "OK" to include modals in the default UX for creating new content. 🤦‍♂️
Modals are not even remotely "OK"; they're a UX anti-pattern 😢
and a major red flag of lazy design. 🔴

For the purposes of this example/spike, 🧑‍💻
the objective is to demo drag-and-drop 🐉
and you have achieved that. ✅

In terms of our scarce/valuable time we don't need to spend any more on this. 💸
I've made a note to write about it: dwyl/product-ux-research#38 📝
We will completely avoid them in our App. 🙅

nelsonic

@SimonLab excellent code and docs!
Would be good to add some tests as the coverage is quite low ...

mix c

Coverage:

----------------
COV    FILE                                        LINES RELEVANT   MISSED
  0.0% lib/app.ex                                      9        0        0
 75.0% lib/app/application.ex                         36        4        1
  0.0% lib/app/repo.ex                                 5        0        0
 61.1% lib/app/tasks.ex                              146       18        7
100.0% lib/app/tasks/item.ex                          18        2        0
  0.0% lib/app_web.ex                                110        1        1
  0.0% lib/app_web/controllers/page_controller.        7        1        1
  0.0% lib/app_web/endpoint.ex                        46        0        0
 41.7% lib/app_web/live/item_live/form_componen       55       12        7
 33.3% lib/app_web/live/item_live/index.ex           107       18       12
  0.0% lib/app_web/live/item_live/show.ex             21        5        5
 90.0% lib/app_web/live/live_helpers.ex               60       10        1
 37.5% lib/app_web/router.ex                          32        8        5
 80.0% lib/app_web/telemetry.ex                       71        5        1
 25.0% lib/app_web/views/error_helpers.ex             30        4        3
100.0% lib/app_web/views/error_view.ex                16        1        0
  0.0% lib/app_web/views/layout_view.ex                7        0        0
  0.0% lib/app_web/views/page_view.ex                  3        0        0
100.0% test/support/conn_case.ex                      38        2        0
 57.1% test/support/data_case.ex                      58        7        3
100.0% test/support/fixtures/tasks_fixtures.ex        20        2        0
[TOTAL]  53.0%
----------------

Some of these files can be ignored, but others will need to have tests. 💭
We can add a chore to the backlog to create these tests. 🙏
and ideally write very clear docs for the tests 📝
because this feature will be "core" to our App. 📱

Test npm i and examples

71872ab

Run the current examples with node Add lock package file to gitignore

SimonLab added the in-progress An issue or pull request that is being worked on by the assigned person label Oct 19, 2022

SimonLab self-assigned this Oct 19, 2022

Create phoenix application

c4f9743

- Create new phx app - Add Tailwind to the phoenix application

SimonLab force-pushed the phoenix-example-#4 branch from 080d28d to c4f9743 Compare October 21, 2022 10:14

remember to run mix assets.deploy to create the required JS & CSS fil…

15114b5

…es see: #5 (comment)

SimonLab added 3 commits October 22, 2022 13:49

Downgrade Tailwind to use 3.1.8 version

0544367

- hotreload doesn't seem to work with 3.2 so using 3.1.8

Add Alpine.js

dd85ede

Add alpine.js cdn in root file Create button using Alpine to test everything still ok

Use phx.gen.live to create items

17f712e

Create item schema using phx.gen.live

SimonLab added 4 commits October 23, 2022 14:16

Run formatter

63c7d80

Run mix format

Create automatically index for item

784ab99

Create index when new item created

Use Petal UI component

38ccca8

Update modal form to create item

Update tests

01091a4

Update and remove unused tests

SimonLab changed the title ~~Phoenix example~~ PR: Phoenix example Oct 24, 2022

SimonLab added 2 commits October 24, 2022 13:33

Implement drag and drop with vanilla js

15cd7a0

First attempt at drag and drop with vanilla js version

Create working example with js

eeba5be

Drag and drop with javascript

SimonLab added 3 commits October 24, 2022 16:27

Turn down background color

43ae038

use bg-red-100 to see moving item

Define dragstart and dragend events with alpine

2338f73

Set background color when an element is moved

First Alpine.js drag and drop version

564d4ce

Use Alpine.js to drag and drop an item in a list

SimonLab force-pushed the phoenix-example-#4 branch from 4572d5d to dfcebaa Compare November 1, 2022 10:53

SimonLab self-assigned this Nov 1, 2022

SimonLab added in-progress An issue or pull request that is being worked on by the assigned person and removed awaiting-review An issue or pull request that needs to be reviewed labels Nov 1, 2022

SimonLab added 2 commits November 1, 2022 15:34

Simplify Phoenix app setup

ee7c2ce

Remove Tailwind and Petal Components to make the setup easier.

Simplify documentation

5bd6e18

Read again the doc and make it easier to follow/implement

SimonLab force-pushed the phoenix-example-#4 branch from 51d09b7 to 5bd6e18 Compare November 1, 2022 20:57

SimonLab removed their assignment Nov 1, 2022

SimonLab added awaiting-review An issue or pull request that needs to be reviewed and removed in-progress An issue or pull request that is being worked on by the assigned person labels Nov 1, 2022

nelsonic added in-review Issue or pull request that is currently being reviewed by the assigned person and removed awaiting-review An issue or pull request that needs to be reviewed labels Nov 2, 2022

SimonLab force-pushed the phoenix-example-#4 branch from 3bffb9b to d93ba56 Compare November 2, 2022 10:40

Update code to match the one in drag-and-drop.md

1144e64

Update Phoenix app code to match the one describe in the markdown documentation

SimonLab force-pushed the phoenix-example-#4 branch from d93ba56 to 1144e64 Compare November 2, 2022 12:39

nelsonic mentioned this pull request Nov 2, 2022

SPIKE: Drag-and-drop reordering of items in a list #4

Closed

10 tasks

nelsonic reviewed Nov 2, 2022

View reviewed changes

add final demo GIF to LiveView Drag-and-Drop example #4

863a8ce

nelsonic approved these changes Nov 3, 2022

View reviewed changes

add alias "mix c" for running coverage see: #5 (review)

70d41be

nelsonic merged commit 1242d07 into main Nov 3, 2022

nelsonic deleted the phoenix-example-#4 branch November 3, 2022 09:50

nelsonic mentioned this pull request Nov 3, 2022

Chore: Add Tests for Drag-and-Drop Example 🙏 #12

Open

5 tasks

LuchoTurtle mentioned this pull request Mar 31, 2023

[PR] Adding drag n drop and index-based reordering dwyl/mvp#345

Merged

Provide feedback

Saved searches

Use saved searches to filter your results more quickly

PR: `Phoenix` `LiveView` Drag-and-Drop Example #5

PR: `Phoenix` `LiveView` Drag-and-Drop Example #5

SimonLab commented Oct 19, 2022

SimonLab commented Oct 21, 2022

nelsonic commented Oct 21, 2022

SimonLab commented Oct 21, 2022

nelsonic commented Oct 21, 2022

nelsonic commented Oct 21, 2022

SimonLab commented Oct 22, 2022

SimonLab commented Oct 22, 2022

nelsonic commented Oct 22, 2022

nelsonic commented Oct 24, 2022

SimonLab commented Oct 24, 2022 •

edited

Loading

SimonLab commented Nov 1, 2022

nelsonic commented Nov 2, 2022

SimonLab commented Nov 2, 2022

LuchoTurtle commented Nov 2, 2022

nelsonic Nov 2, 2022

SimonLab Nov 3, 2022 •

edited

Loading

nelsonic Nov 3, 2022

nelsonic left a comment

PR: Phoenix LiveView Drag-and-Drop Example #5

PR: Phoenix LiveView Drag-and-Drop Example #5

Conversation

SimonLab commented Oct 19, 2022

SimonLab commented Oct 21, 2022

nelsonic commented Oct 21, 2022

SimonLab commented Oct 21, 2022

nelsonic commented Oct 21, 2022

nelsonic commented Oct 21, 2022

SimonLab commented Oct 22, 2022

SimonLab commented Oct 22, 2022

nelsonic commented Oct 22, 2022

nelsonic commented Oct 24, 2022

SimonLab commented Oct 24, 2022 • edited Loading

SimonLab commented Nov 1, 2022

nelsonic commented Nov 2, 2022

SimonLab commented Nov 2, 2022

LuchoTurtle commented Nov 2, 2022

nelsonic Nov 2, 2022

Choose a reason for hiding this comment

SimonLab Nov 3, 2022 • edited Loading

Choose a reason for hiding this comment

nelsonic Nov 3, 2022

Choose a reason for hiding this comment

nelsonic left a comment

Choose a reason for hiding this comment

PR: `Phoenix` `LiveView` Drag-and-Drop Example #5

PR: `Phoenix` `LiveView` Drag-and-Drop Example #5

SimonLab commented Oct 24, 2022 •

edited

Loading

SimonLab Nov 3, 2022 •

edited

Loading